<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>轮播2</title>
</head>
<style>
    .box {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        position: relative;
        margin: auto;
        overflow: hidden;
        cursor: pointer;
    }

    .box ul,
    .box ol {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .box ul li {
        width: 500px;
        height: 400px;
        display: none;
    }

    .box ul li img {
        width: 500px;
        height: 400px;
    }

    .box ol {
        width: 120px;
        position: absolute;
        left: 50%;
        margin-left: -40px;
        bottom: 20px;
        height: 20px;
        background: #fff;
        display: flex;
        justify-content: space-evenly;
        padding: 10px 0;
        border-radius: 20px;
    }

    .box ol li {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: springgreen;
        border: 1px solid #999;
    }

    .box ol li.current {
        background: skyblue;
    }

    .box ul li.current {
        display: block;
    }

    .box .left,
    .box .right {
        position: absolute;
        top: 50%;
        width: 30px;
        height: 30px;
        margin-top: -15px;
        background: #ccc;
        text-align: center;
        line-height: 30px;
        text-decoration: none;
        font-weight: bold;
        color: #fff;
    }

    .left {
        left: 0;
    }

    .right {
        right: 0;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li class="current"><img src="images/1.jpg" alt=""></li>
            <li><img src="images/2.jpg" alt=""></li>
            <li><img src="images/3.jpg" alt=""></li>
            <li><img src="images/4.jpg" alt=""></li>
        </ul>
        <ol>
            <li class="current"></li>
            <li></li>
            <li></li>
            <li></li>
        </ol>
        <a href="javascript:;" class="left">&lt;</a>
        <a href="javascript:;" class="right">&gt;</a>
    </div>
</body>
<script type="text/javascript">
    /*
        实现功能
        1、自动切换图片 保证小圆点跟随
        2、上一张下一张点击切换图片  小圆点也需要跟随
        3、点击小圆点 切换到对应的图片
    */
    //    自动切换图片
    var bossDom = document.querySelector(".box")
    var imgDom = document.querySelectorAll("ul>li")
    var btnDom = document.querySelectorAll("ol>li")
    var rightDom = document.querySelector(".right");
    var leftDom = document.querySelector(".left");
    var num = 0;
    var timer
    // 声明play函数，控制自动切换
    play();

    function play() {
        timer = setInterval(function () {
            num++;
            if (num > 3) {
                num = 0
            }
            playShow()
        }, 2000)
    }

    function playShow() {
        // 图片的显示playShow
        document.querySelector("ul>.current").className = ""
        imgDom[num].className = "current"
        btnDom.forEach(function (item) {
            item.className = "";
          
        })
        btnDom[num].className = "current"
        // document.querySelector("ol>.current").className = ""

    }
    // 鼠标滑入滑出效果
    bossDom.onmouseover = function () {
        clearInterval(timer)
    }
    bossDom.onmouseout = function () {
       play()
    }
    // 右侧点击
    rightDom.onclick = function () {
        clearInterval(timer)
        num++;
        if (num > 3) {
                num = 0
            }
        playShow()
    }
   
    // 左侧点击
    leftDom.onclick = function () {
        clearInterval(timer)
        num--;
        if (num < 0) {
            num = 3
        }
       playShow()
    }
    
    // 点击小圆点 切换到对应的图片
    btnDom.forEach(function (item, index) {
        item.onclick = function () {
            // clearInterval(timer)
            num = index;
            playShow()
        }
    })
</script>

</html>